.wrapper.article {
	max-width: 800px;
}
.article .titl {
	font-size: 25px;
}
.article .timeline {
	position: relative;
}
.article .timeline .timenode {
	position: relative;
	background: #fff; border: 1px solid #ccc;
	width: 16px; height: 16px;
	border-radius: 8px;
	display: block;
	float: left; cursor: pointer;
	margin: 20px 40px;
}
.article .timeline .timenode .txt {
	display: block; position: absolute;
	bottom: -20px; left: 50%;
	transform: translate(-50%, 0);
	-o-transform: translate(-50%, 0);
	-moz-transform: translate(-50%, 0);
	-webkit-transform: translate(-50%, 0);
}
.article .timeline .timenode:before {
	content: ''; display: block;
	background: red; width: 10px; height: 10px;
	position: absolute; top: 3px; left: 3px;
	border-radius: 6px;
	transition: background 0.3s;

}
.article .timeline .timenode:hover:before {
	background: #EEE;
}
.article .timeline:before {
	content: ''; display: block;
	position: absolute; height: 0;
	width: 100%; left: 0; top: 50%;
	border-top: 1px solid #eee;
}
.article .timeline:after {
	content: ''; display: block;
	clear: both;
}
.article .content {
	max-width: 800px;
}
.article .content p {
	color: #666;
	text-align: justify;
}
.article .content h3 {
	font-size: 16px;
	color: #3a539b;
	margin-bottom: 0px;
}